<template>
  <div>
    <!-- 头部 -->
    <div v-if="crashEdit" class="mod-config">
      <!-- 上面 -->
      <div class="title-se">
      <div class="title-a">
        <div class="zuofei">
          <div class="in-ts"></div>
          人员信息</p>
        </div>
        <div class="fanhui">
        <el-button type="text" @click="addOrUpdateHandle(rowId)">修改</el-button>
        <i class="text-i">|</i>
        <el-button type="text" @click="clickVis">返回上级</el-button>
        </div>
      </div>
      <!-- 详情 -->
      <div class="personnel-s" ref="dataForme">
      <el-form :model="e" :label-position="labelPosition" class="queryFormList">
       <el-row>
         <el-col :span="6">
         <el-form-item label="所在部门：">
         {{e.deptName}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
         <el-form-item label="姓名：">
         {{e.name}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="身份证号：">
         {{e.idCard}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="性别：">
         <span v-if="e.gender ===1">
          男
         </span>
         <span v-if="e.gender ===2">
           女
         </span>
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="手机号：">
              {{e.mobile}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="婚姻状况：">
          <span v-if="e.marriageFlag ===1">
          已婚
         </span>
         <span v-if="e.marriageFlag ===0">
           未婚
         </span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="职位：">
           {{e.post}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="入职日期：">
              {{e.entryTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="合同到期日期：">
              {{e.contractExpirationTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="员工状态：">
         <span v-if="e.onCompanyFlag === 1">
           在职
         </span>
         <span v-if="e.onCompanyFlag === 0">
           离职
         </span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="员工离职日期：">
              {{e.companyEndTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="学历：">
              {{e.academic}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="专业：">
              {{e.schoolProfession}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="毕业日期：">
              {{e.graduateTime}}
            </el-form-item>
         </el-col><el-col :span="6">
           <el-form-item label="是否缴纳社保：">
          <span v-if="e.socialSecurityFlag === 1">
           是
         </span>
         <span v-if="e.socialSecurityFlag === 0">
           否
         </span>
            </el-form-item>
         </el-col><el-col :span="6">
           <el-form-item label="参保日期：">
              {{e.socialSecurityTime}}
            </el-form-item>
         </el-col><el-col :span="6">
           <el-form-item label="技术负责人：">
          <span v-if="e.directorFlag === 0">
           是
         </span>
         <span v-if="e.directorFlag === 1">
           否
         </span>
            </el-form-item>
         </el-col><el-col :span="6">
           <el-form-item label="负责内容：">
              {{e.directorFor}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
         <el-form-item label="成长日志：">
              {{e.remark}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="6">
           <el-form-item label="员工简历：">
            <ele-image :urls="certiPicList"></ele-image>
            <!-- <ele-image :urls="dataForm.certifInfoList"></ele-image> -->
            </el-form-item>
         </el-col>
       </el-row>
     </el-form>
      </div>
      </div>
    <!-- 搜索 -->
    <div class="title-a">
        <div class="zuofei">
          <div class="in-ts"></div>
        <p>关联证书</p>
        </div>
        <div class="fanhui">
        </div>
      </div>
    <!-- table -->
    <div class="table-is">
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="certificateType"
        min-width="70"
        sortable='custom'
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        min-width="70"
        sortable='custom'
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
            挂出
          </span>
          <span v-else-if="scope.row.status === 21">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E"></i>
            投标
          </span>
          <span v-else-if="scope.row.status === 22">
            <i class="font_family icon-tuoyuan1" style="color:#6EE976"></i>
            项目
          </span>
          <span v-else-if="scope.row.status === 0">
            <i class="font_family icon-tuoyuan1" style="color:#6E92E9"></i>
            空闲
          </span>
          <span style="color:#F56C6C;" v-else-if="scope.row.status === -1">
            禁用
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        align="center"
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        min-width="180"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="mobile"
        align="center"
        min-width="110"
        label="手机号">
      </el-table-column>
       <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        min-width="170"
        align="center"
        sortable='custom'
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        min-width="170"
        align="center"
        sortable='custom'
        label="证书编号">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        min-width="120"
        align="center"
        sortable='custom'
        label="证书到期日期"
        :formatter="dateFormats"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
    </div>
    <add-or-update @clickGetList="clickGetList" :img="certiPicListss" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getPersonnelDetails"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from '../../company/em/employee-add-or-update'
import EleImage from '@/views/modules/certificate/certinfo/ele-image'
  export default {
    name:'PersonnelType',
    data() {
      return {
        labelPosition:'right',
        addOrUpdateVisible: false,
        certificateListVisibleCrash: true,
        queryModelVisible: false,
        visible: false,
        flag: true,
        params: {},
        visId:{},
        e:{},
        dataListLoading: false,
        isEdited: true,
        tableHeight:0,
        dataList:[],
        certiPicList:[],
        certiPicListss:[],
        tenantId: '',
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        a: 0,
        crashTye:true,
        crashEdit:true,
        orderBy:'validityEndTime',
        inOrder:'asc'
      }
    },
    props:{
    rowName:{
      type:String,
      default: true
    },
    rowId:{
      type:Number,
      default: true
    }
    },
    components: {
      AddOrUpdate, EleImage
    },
    mounted(){
      this.dataFormeHe()
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.a - 175;
            //后面的50：根据需求空出的高度，自行调整
        })
    },
    created(){
      // console.log(this.dataList);
      this.getDataList()
      this.getPersonnelDetails()
      this.dataFormeHe()
    },
    watch:{
      // params(){
      //   this.$nextTick(() => {
      //     this.$refs.child.getDataList()
      //   })
      // }
    },
    methods: {
      dataFormeHe(){
      this.a = this.$refs.dataForme.offsetHeight
      // console.log(this.$refs.dataForme);
      },
      addOrUpdateHandle (rowId) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(rowId)
        })
      },
      dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      clickGetList(){
      this.getPersonnelDetails()
      },
      // 返回上级
      clickCertificateCrach(){
      this.crashEdit = true
      },
      // 返回上级
      clickVis(){
      this.$parent.clickAppear()
      },
      queryAll(){
        this.params.name = ''
        this.$refs.child.getDataList()
      },
      sort_change(column){
      // console.log(column);
      this.orderBy = column.prop
      // console.log(this.orderBy);
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      getPersonnelDetails(){
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/info/'+ this.rowId),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.remoteUrl = data.remoteUrl
            this.e = data.e
            this.certiPicList.push({
            path: data.e.contractInfoList[0].path
            })
            this.certiPicListss.push({
            url: data.e.contractInfoList[0].path
            })
          }
        })
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'empOrFriId':this.rowId,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      clickCertificateListVisible(row){
      this.visId = row
      this.crashEdit = false
      // console.log(id);
      },
      init(tenantId){
        this.visible = true
        this.tenantId = tenantId
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      queryHandle(){
        // this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      clickReturn(){
       this.$parent.queryAll()
      },
      setParams(params){
        this.params = params
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
    }
  }
</script>

<style lang="scss" scoped>
.mod-config{
  width: 100%;
  height: 100%;
  padding:15px;
  background-color: #F5F7FA;
}
  .font_family{
    font-size: 15px !important;
    // margin-top: 2px;
  }
.text-i{
  margin-left: 8px;
  margin-right: 8px;
  color: #E8E8E8;
}
.personnel-s{
  background-color: #ffffff;
  padding-left: 15px;
  .queryFormList{
    .el-form-item{
      margin-bottom: 0px !important;
    }
  }
}
.table-is{
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: #ffffff;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  margin-left: 15px;
  background: #6E92E9;
}
.title-a{
  width: 100%;
  height: 56px;
  padding-right: 10px;
  background-color: #ffffff;
  // margin-left: 3%;
  // margin-right: 3%;
  // border-bottom:1px solid #EBEEF5;
  // line-height: 56px;
  .zuofei{
    width: 40%;
    height: 56px;
    font-size: 16px;
    color: #303133;
    font-weight: 700;
    float: left;
    display: flex;
    align-items: center;
    // margin-left: 20px;
  }
  .fanhui{
    // width: 10%;
    height: 56px;
    font-size: 14px;
    // color: #409EFF;
    float: right;
    display: flex;
    align-items: center;
    // padding-right: 30px;
    span{
      float: right;
      // margin-right: 20px;
    }

  }
}
.title-b{
  width: 100%;
  height: 56px;
  // margin-left: 3%;
  // margin-right: 3%;
  display: flex;
  align-items: center;
.input-name{
  width: 200px;
}
}
/deep/.buttonItemHan{
  margin-left: 10px;
  font-size: 14px !important;
  i{
    font-size: 16px !important;
  }
}
/deep/.buttonItem{
font-size: 14px !important;
  i{
    font-size: 16px !important;
  }
}
    .el-drawer__body {
        padding: 20px;
    }

    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }

    .el-upload-dragger{
      width: 100%;
    }
</style>
